<template>
    <div class="custom__dialog">
        <hsa-dialog v-model:visible="dialogVisible" title="弹窗标题" width="700">

            <el-tabs tab-position="left" class="demo-tabs">
                <el-tab-pane label="逻辑处理">
                    <el-form label-position="top">
                        <el-form-item label="原字段信息(多个字段通过，隔开，需对应转化)">
                            <el-input type="textarea" :rows="3" placeholder="填写" />
                        </el-form-item>
                        <el-form-item label="逻辑处理">
                            <el-input v-model="formData.logicalPprocessing" type="textarea" :rows="3"
                                placeholder="填写逻辑处理" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="字段设置">
                    <el-form label-position="top">
                        <el-form-item label="脱敏配置(多个字段通过，隔开)">
                            <el-input type="textarea" :rows="3" placeholder="填写" />
                        </el-form-item>
                        <el-form-item label="行权限配置">
                            <el-tree style="max-width: 600px" :data="data" show-checkbox node-key="id"
                                :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>

        </hsa-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue'

    // 事件定义
    const emit = defineEmits(['success', 'cancel'])

    const formData = reactive({
        logicalPprocessing: ''

    })

    // 双向绑定处理
    const dialogVisible = ref(false)

    // 打开弹窗
    const open = () => {
        dialogVisible.value = true

    }

    // 关闭弹窗
    const close = () => {
        dialogVisible.value = false
    }

    defineExpose({
        open,
        close
    })

    const data = [
        {
            id: 1,
            label: 'Level one 1',
            children: [
                {
                    id: 4,
                    label: 'Level two 1-1',
                    children: [
                        {
                            id: 9,
                            label: 'Level three 1-1-1',
                        },
                        {
                            id: 10,
                            label: 'Level three 1-1-2',
                        },
                    ],
                },
            ],
        },
        {
            id: 2,
            label: 'Level one 2',
            children: [
                {
                    id: 5,
                    label: 'Level two 2-1',
                },
                {
                    id: 6,
                    label: 'Level two 2-2',
                },
            ],
        },
        {
            id: 3,
            label: 'Level one 3',
            children: [
                {
                    id: 7,
                    label: 'Level two 3-1',
                },
                {
                    id: 8,
                    label: 'Level two 3-2',
                },
            ],
        },
    ]
</script>

<style lang="scss" scoped>
    .custom__dialog {
        height: 0 !important;

        ::v-deep(.hsa-dialog) {

            // 说明布局
            .el-textarea {
                width: 100%;

                textarea {
                    resize: none;
                }
            }
        }
    }
</style>